<template>
  <div id="yoso">

    <!--      <div class="a1">
            <el-row gutter="20" type="flex" class="aa">
              <el-col span="4" offset="1">
                <div class="a2">
                  <img src="../../assets/2.png">
                </div>
              </el-col>
              <el-col span="3">
                <div >
                  <a href="" target="_self" style="color: white" id="b2">我的京东</a>
                  <div style="height: 7px"></div>
                  <el-button type="danger" id="b1">返回京东首页</el-button>
                </div>
              </el-col>
              <el-col span="2">
                <a href="" style="color: white">首页</a>
              </el-col>
              <el-col span="2">
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="background-color: red">
                  <el-submenu index="1">
                    <template slot="title"><el-link @click="" class="sp">账号设置 </el-link></template>
                    <el-menu-item index="2-1">账号设置</el-menu-item>
                    <el-menu-item index="2-2">个人信息</el-menu-item>
                    <el-menu-item index="2-3">账户安全</el-menu-item>
                    <el-menu-item index="2-4">收货地址</el-menu-item>
                    <el-menu-item index="2-3">账号绑定</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
              <el-col span="2">
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="background-color: red">
                  <el-submenu index="1" style="background-color: red">
                    <template slot="title"><el-link @click="" class="sp2">评价 </el-link></template>
                    <el-menu-item index="2-1">已评价</el-menu-item>
                    <el-menu-item index="2-2">待评价</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
              <el-col span="6">
                <el-input v-model="name" ><template slot="append"><el-button class="a1" icon="el-icon-search" style="height: 15px">搜索</el-button></template>
                </el-input>
              </el-col>
              <el-col span="5">
                <div  class="a3">
                  <div style="height: 7px"></div>
                  <span > <el-link @click="toMyCart">我的购物车</el-link></span></div>
              </el-col>
            </el-row>
          </div>-->

    <div id="title" class="format">
      <span>我的订单</span>
    </div>
    <div id="main" class="format">
      <div id="m_nav" class="main_format">
        <div><a href="javascript:void (0)" @click="paging(1,'')">全部订单</a></div>
        <div><a href="javascript:void (0)" @click="paging(1,3)">待发货</a></div>
        <div><a href="javascript:void (0)" @click="paging(1,4)">已发货</a></div>
        <div><a href="javascript:void (0)" @click="paging(1,5)">待收货</a></div>
        <div><a href="javascript:void (0)" @click="paging(1,7)">待评价</a></div>
        <div style="width: 405px"></div>
        <div>
          <input type="text" v-model="id" placeholder="商品编号/订单号">
          <el-button icon="el-icon-search" circle></el-button>
        </div>
      </div>
      <div id="order" class="main_format">
        <div id="order_bar">
          <div id="order_bar_left">
            <div style="width: 130px"><span>近三个月订单</span></div>
            <div style="width: 450px"><span>订单详情</span></div>
          </div>
          <div id="order_bar_right">
            <div style="width: 115px">收货人</div>
            <div style="width: 110px">金额</div>
            <div style="width: 98px">状态</div>
            <div style="width: 110px">操作</div>
          </div>
        </div>

        <div class="item" v-for="order in page.list">
          <div class="item_top main_format">
            <div style="width: 200px"><span>{{order.orderTime}}</span></div>
            <div style="width: 326px"><span>订单号{{order.code}}</span></div>

          </div>
          <div class="item_main main_format">
            <ul>
              <li style="width: 60px;">
                <a href="javascript:void (0)" @click="toCartAdd(order.commodity.code)"><img
                  :src="order.commodity.photoPathList[0]" alt="" width="50px"></a>
              </li>
              <li style="width: 238px;text-align: left">
                <a href="#">{{order.details}}</a>
              </li>
              <li style="width: 170px">x{{order.count}}</li>
              <li style="width: 100px">
                <a href="#">申请售后</a>
              </li>
              <li style="width: 115px;text-align: right">{{user.name}}</li>
              <li style="width: 110px;text-align: right">
                <div>￥{{order.subtotal}}</div>
                <div>在线支付</div>
              </li>
              <li style="width: 110px;text-align: right;">
                <!--<div v-for=" s in item.status">{{s.s_name}}</div>-->
                <div>{{order.status}}</div>
              </li>
              <li style="width: 120px;text-align: right">
                <div>查看发票</div>
                <div v-if="o_status=='7'"><a href="javascript:void (0)">评价</a> <a href="javascript:void (0)">删除</a>
                </div>
                <div><a href="javascript:void (0)" v-if="o_status=='3'">催催催</a></div>
                <div><a href="javascript:void (0)" @click="received(order.order.o_id)" v-if="o_status=='5'">收到宝贝</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        background
      ></el-pagination>
    </div>


    <!--猜你喜欢-->
    <div style="margin: 30px 0">
      <div style="font-size: 15px">
        <h1>猜你喜欢</h1>
      </div>
      <div>
        <el-carousel indicator-position="outside">
          <el-carousel-item>
            <img src="../../../static/img/l_head/3.png">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../../static/img/l_head/4.png">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../../static/img/l_head/3.png">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Order",
    inject: ['reload'],
    data() {
      return {
        pageVo: {
          pagePojo:{
            curPage: 1,
            pageSize: 5,
          },
          searchParamList: [
            {
              condition: "",
              key: "username",
              value: ""
            }
          ]
        },
        page: {},
        login: false,
        user: {
          username:''
        },
        o_status: '',
        pageSize: 2,
        name: '',
        id: '',
        comment: '',
        user_top: false
      }
    },
    methods: {
      paging() {
        this.pageVo.searchParamList[0].value = this.user.username;
        this.$axios.post('/order/getUserOrder',this.pageVo)
          .then(resp => {
            this.page = resp.data.data;
          });
      },
      toCartAdd(c_id) {
        this.$router.push('/commodity/single/' + c_id)
      },

      handleSizeChange (newSize) {
        this.pageVo.pagePojo.pageSize = newSize;
        this.paging()
      },
      handleCurrentChange (curPage) {
        this.pageVo.pagePojo.curPage = curPage;
        this.paging()
      },
      toUpdate(o_id) {
        this.$router.push('/order/update/' + o_id)
      },
      received(o_id) {
        this.$axios.post('OrderServlet/received?o_id=' + o_id)
        this.paging(1, 5)
      },
      toMyCart() {
        this.$router.push('/cart')
      },

    },
    created() {
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.paging();

    }
  }

</script>

<style scoped>
  #yoso {
    background-color: #f5f5f5;
  }

  img {
    display: inline-block;
  }

  .format {
    width: 1090px;
    background-color: white;
    margin: 0 auto;
  }

  .main_format {
    width: 1050px;
    margin: 0 auto;
    background-color: white;
  }

  #title {
    margin: 0 auto;
    height: 58px;
    line-height: 58px;
    text-align: left;
  }

  #m_nav {
    margin-top: 20px;
  }

  #m_nav div {
    display: inline-block;
    height: 45px;
    margin: 0 10px;
    line-height: 45px;
  }

  #order_bar {
    background-color: #f5f5f5;
    margin-bottom: 20px;
  }

  #order_bar div {
    display: inline-block;
  }

  #order_bar_left, #order_bar_right {
    height: 34px;
    background-color: #f5f5f5;
    line-height: 34px;
  }

  #order_bar_left {
    width: 589px;
  }

  #order_bar_right {
    width: 456px;
  }

  .item {
    border: 1px solid silver;
    margin-bottom: 20px;
    position: relative;
  }

  .item_top div {
    display: inline-block;
  }

  .item_top {
    background-color: #f5f5f5;
    text-align: left;
    padding: 5px 0;
  }

  .item_top div {
    text-align: left;
  }

  .item_main {
    height: 102px;

  }

  .item_main div {
    display: block;
  }

  .item_main ul {
    margin-top: 32px;
  }

  .item_main ul li {
    float: left;
    font-size: 12px
  }
</style>
<style>
  .format {
    width: 990px;
    margin: 0 auto;
  }

</style>
<!--头部-->
<style>
  .a1 {
    background-color: red;
    height: 100px;
  }

  .a2 {
    height: 100px;
    display: flex;
    align-items: center;
  }

  #b1 {
    border-radius: 30px;
  }

  #b2 {
    font-size: 20px;
  }

  .aa {
    align-items: center;
  }

  .sp {
    color: white;
  }

  .sp hover {
    color: black;
  }

  .sp2 {
    color: white;
  }

  .a3 {
    background-color: white;
    height: 40px;
    border-radius: 10px;
  }

  .el-carousel__item h3 {
    opacity: 0.75;
    margin: 0;
  }
</style>

